<template>
  <!-- 卡片组件容器 -->
  <el-card>
    <!-- 标签页组件 -->
    <el-tabs>
      <!-- 第一页：医生工作量统计列表 -->
      <el-tab-pane label="医生工作量统计列表">
        <!-- 查询表单 -->
        <el-form ref="queryParams" :model="queryParams" :inline="true" label-width="68px">
          <!-- 医生名称输入框 -->
          <el-form-item label="医生名称" prop="doctorName">
            <el-input
                v-model="queryParams.doctorName"
                placeholder="请输入医生名称"
                clearable
                size="small"
                style="width:240px"/>
          </el-form-item>
          <!-- 接诊时间选择 -->
          <el-form-item label="接诊时间">
            <el-date-picker
                v-model="queryParams.dateRange"
                size="small"
                style="width:240px"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
            />
          </el-form-item>
          <!-- 搜索和重置按钮 -->
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <!-- 数据表格展示 -->
        <el-table
            :data="tableData"
            border
            show-summary
            :summary-method="getSummaries"
            style="width: 100%">
          <!-- 挂号ID列 -->
          <el-table-column
              prop="registrationItemId"
              label="挂号ID"
              align="center">
          </el-table-column>
          <!-- 医生姓名列 -->
          <el-table-column
              prop="doctorName"
              align="center"
              label="医生姓名">
          </el-table-column>
          <!-- 挂号费用列 -->
          <el-table-column
              prop="registrationAmount"
              sortable
              align="center"
              label="挂号费用">
          </el-table-column>
          <!-- 患者姓名列 -->
          <el-table-column
              prop="patientName"
              align="center"
              label="患者姓名">
          </el-table-column>
          <!-- 接诊时间列 -->
          <el-table-column
              prop="visitDate"
              align="center"
              label="接诊时间">
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <!-- 第二页：总体工作量统计列表 -->
      <el-tab-pane label="总体工作量统计列表">
        <!-- 查询表单 -->
        <el-form ref="queryParamsTwo" :model="queryParamsTwo" :inline="true" label-width="68px">
          <!-- 医生名称输入框 -->
          <el-form-item label="医生名称" prop="doctorName">
            <el-input
                v-model="queryParamsTwo.doctorName"
                placeholder="请输入医生名称"
                clearable
                size="small"
                style="width:240px"/>
          </el-form-item>
          <!-- 接诊时间选择 -->
          <el-form-item label="接诊时间">
            <el-date-picker
                v-model="queryParamsTwo.dateRange"
                size="small"
                style="width:240px"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
            />
          </el-form-item>
          <!-- 搜索和重置按钮 -->
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQueryTwo">搜索</el-button>
            <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQueryTwo">重置</el-button>
          </el-form-item>
        </el-form>
        <!-- 数据表格展示 -->
        <el-table
            :data="tableDataTwo"
            border
            show-summary
            style="width: 100%">
          <!-- 医生编号列 -->
          <el-table-column
              prop="userId"
              align="center"
              label="医生编号">
          </el-table-column>
          <!-- 医生姓名列 -->
          <el-table-column
              prop="doctorName"
              align="center"
              label="医生姓名">
          </el-table-column>
          <!-- 挂号总金额列 -->
          <el-table-column
              prop="registrationAmount"
              sortable
              align="center"
              label="挂号总金额">
          </el-table-column>
          <!-- 接诊数量列 -->
          <el-table-column
              prop="totalVisits"
              align="center"
              sortable
              label="接诊数量">
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      // 第一页查询参数
      queryParams: {
        doctorName: '',
        dateRange: []
      },
      // 第二页查询参数
      queryParamsTwo: {
        doctorName: '',
        dateRange: []
      },
      // 第一页列表数据
      tableData: [],
      // 第二页列表数据
      tableDataTwo: [],
    }
  },
  created() {
    // 页面创建时加载第一页数据
    this.loadRegistration();
    // 页面创建时加载第二页数据
    this.loadWorkload();
  },
  methods: {
    // 加载第一页数据
    loadRegistration() {
      // 发起请求获取数据，并更新tableData
      this.$http.post("/statistics/registration/listAll", this.queryParams).then(resp => {
        this.tableData = resp.data.data;
        this.queryParams.total = resp.data.data.total;
      });
    },
    // 加载第二页数据
    loadWorkload() {
      // 发起请求获取数据，并更新tableDataTwo
      this.$http.post("/statistics/registration/listById", this.queryParamsTwo).then(resp => {
        this.tableDataTwo = resp.data.data;
        this.queryParamsTwo.total = resp.data.data.total;
      });
    },
    // 重置第一页查询参数并重新加载数据
    resetQuery() {
      // 重置查询参数
      this.queryParams = {
        doctorName: '',
        dateRange: []
      };
      // 重新加载数据
      this.loadRegistration();
    },
    // 搜索第一页数据
    handleQuery() {
      // 根据当前查询参数重新加载数据
      this.loadRegistration();
    },
    // 重置第二页查询参数并重新加载数据
    resetQueryTwo() {
      // 重置查询参数
      this.queryParamsTwo = {
        doctorName: '',
        dateRange: []
      };
      // 重新加载数据
      this.loadWorkload();
    },
    // 搜索第二页数据
    handleQueryTwo() {
      // 根据当前查询参数重新加载数据
      this.loadWorkload();
    },
    // 自定义汇总逻辑：只汇总“挂号费用”
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'; // 在第一个单元格中显示“合计”
        } else if (index === 2) {  // 假设“挂号费用”在第3列
          const values = data.map(item => Number(item.registrationAmount));
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] += ' ';  // 汇总后添加单位
        } else {
          sums[index] = '';
        }
      });
      return sums;
    },
  }
}
</script>

<style>
</style>
